<template>
  <md-nav-bar title="" color="white" backgroundColor="#2B2A2A" />
  <view class="lyric-player-container">
    <!-- 歌曲信息 -->
    <view class="song-title">{{ data.detail?.name }}</view>
    <view class="song-author">
      <text class="iconfont user">&#128100;</text>
      {{ data.detail?.memberUser?.nickname || '未知艺术家' }}
    </view>
    <view class="song-date">{{ data.detail?.createTime }}</view>

    <!-- 歌词滚动区 -->
    <scroll-view class="lyric-scroll" :scroll-y="true" :scroll-into-view="currentLineId" scroll-with-animation>
      <view
        v-for="(line, idx) in data.detail?.lyric?.split('\n') || []"
        :key="idx"
        :id="'lyric-' + idx"
        :class="['lyric-line']">
        <!-- 样式 -->
        <!-- idx === currentLine ? 'active' : '', -->
        <!-- line.highlight ? 'highlight' : '', -->
        <!-- line.gray ? 'gray' : '', -->
        {{ line }}
      </view>
    </scroll-view>

    <!-- 播放控制区 -->
    <view class="bottom-player-bar">
      <md-audio :src="data.detail.songUrl" v-model:play="data.audioPlay">
        <!-- 点赞 -->
        <template #left>
          <md-handle-like v-if="data.islike" isFull :musicId="data.detail.id" :status="!!data.detail?.likeStatus" />
        </template>
        <!-- 分享 -->
        <template #right>
          <md-share-btn :title="data.share.title" :image-url="data.share.imageUrl" :path="data.share.path" />
        </template>
      </md-audio>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
// 接口
import api from '@/api';
import type { Music } from '@/api/data';

const data = reactive({
  detail: {} as Music.Detail.Data,
  audioPlay: false,
  islike: true, // 是否显示点赞标识
  share:{}
});

const currentLine = ref(4);
const currentLineId = ref('lyric-' + currentLine.value);

/**
 * 接口相关
 */
// 音乐广场详情
const fetchGetDetail = async (id: number) => {
  try {
    const res = await api.Music.detail({ id });
    data.detail = res.data;
    data.share = {
      title: data.detail?.name,
      path: '/pages/sub/square/musicDetail?id=' + data.id + (data.userId ? ('&parentId=' + data.userId) : ''),
      imageUrl: data.detail?.coverUrl,
    };
  } catch (error) {}
};

// 我的音乐详情
const fetchGetMyDetail = async (id: number) => {
  try {
    const res = await api.Music.myDetail({ id });
    data.detail = res.data;
  } catch (error) {}
};

// 音乐播放数+1
const fetchAddPlayNum = async (id: number) => {
  try {
    await api.Music.addPlayNum({ id });
    // data.detail = res.data;
  } catch (error) {}
};

onLoad((options: any) => {
  data.islike = options?.type != 'my';
  if (options?.id) {
    fetchAddPlayNum(options.id);
    if (options?.type == 'my') {
      // 我的音乐详情
      fetchGetMyDetail(options.id);
    } else {
      // 音乐广场相亲
      fetchGetDetail(options.id);
    }
  }
});

</script>

<style lang="scss" scoped>
.lyric-player-container {
  min-height: 100vh;
  background: #2b2a2a;
  color: #fff;
  padding-bottom: 64rpx;
  box-sizing: border-box;
  padding-top: 32rpx;
}
.iconfont {
  color: #fff;
  font-size: 40rpx;
}
.back {
  font-size: 48rpx;
}
.share {
  font-size: 36rpx;
  margin-left: 24rpx;
}
.song-title {
  text-align: center;
  font-size: 38rpx;
  font-weight: 700;
  margin-bottom: 16rpx;
}
.song-author {
  text-align: center;
  font-size: 28rpx;
  color: #bbb;
  margin-bottom: 4rpx;
}
.user {
  font-size: 28rpx;
  margin-right: 8rpx;
}
.song-date {
  text-align: center;
  font-size: 26rpx;
  color: #888;
  margin-bottom: 32rpx;
}
.lyric-scroll {
  height: calc(100vh - 315px);
  margin: 0 0 0 0;
  padding: 0 48rpx;
  overflow: hidden;
  width: calc(100% - 96rpx);
}
.lyric-line {
  text-align: center;
  font-size: 34rpx;
  color: #fff;
  margin: 40rpx 0;
  transition: color 0.2s, font-size 0.2s;
  opacity: 0.7;
  line-height: 36rpx;
}
.lyric-line.active {
  color: #fff;
  font-size: 40rpx;
  font-weight: 700;
  opacity: 1;
}
.lyric-line.highlight {
  color: #1fa37a;
}
.lyric-line.gray {
  color: #888;
  opacity: 0.5;
}
.bottom-player-bar {
  position: fixed;
  padding: 0 59rpx;
  bottom: 68rpx;
  width: calc(100% - 118rpx);
}
.action {
  font-size: 48rpx;
  color: #fff;
  width: 40rpx;
  height: 40rpx;
}
</style>
